<!-- Transaction Information -->
<div class="row">
    <div class="col-xs-12">
        <div class="panel panel-default table-responsive">
            <div class="panel-heading panel-heading-lg">
                <i class="fa fa-lg fa-bank"></i> Issuance Details
                <a href="#" class="btn btn-xs btn-success pull-right" id="history-info-more" target="_blank"><i class="fa fa-info-circle"></i> more info</a>
            </div>
            <table class="table table-striped table-bordered table-condensed">
            <tbody>
            <tr>
                <td class="info bold" width="130">Transaction Hash</td>
                <td id="tx-hash"></td>
            </tr>
            <tr>
                <td class="info bold" width="130">TX Index</td>
                <td id="tx-index"></td>
            </tr>
            <tr>
                <td class="info bold">Block #</td>
                <td id="block"></td>
            </tr>
            <tr>
                <td class="info bold">Time</td>
                <td id="timestamp"></td>
            </tr>
            <tr>
                <td class="info bold">Asset</td>
                <td id="asset"></td>
            </tr>
            <tr>
                <td class="info bold">Asset Longname</td>
                <td id="asset-longname"></td>
            </tr>
            <tr>
                <td class="info bold">Description</td>
                <td id="description"></td>
            </tr>
            <tr>
                <td class="info bold">Quantity</td>
                <td id="quantity"></td>
            </tr>
            <tr>
                <td class="info bold">Divisible</td>
                <td id="divisible"></td>
            </tr>
            <tr>
                <td class="info bold">Locked</td>
                <td id="locked"></td>
            </tr>
            <tr>
                <td class="info bold">Transfer</td>
                <td id="transfer"></td>
            </tr>
            <tr>
                <td class="info bold">Fee Paid</td>
                <td id="fee"></td>
            </tr>
            <tr>
                <td class="info bold">Source</td>
                <td id="source"></td>
            </tr>
            <tr>
                <td class="info bold">Issuer</td>
                <td id="issuer"></td>
            </tr>
            <tr>
                <td class="info bold">Status</td>
                <td id="status"></td>
            </tr>
            </tbody>
            </table>
        </div>
    </div>
</div><!-- end row -->

<!-- Code to load/update data -->
<script type="text/javascript">
    var tx = FW.CURRENT_TRANSACTION.tx;

    $(document).ready(function(){

        // Update 'more info' link to point to transaction url
        $('#history-info-more').attr('href', FW.EXPLORER_API + '/tx/' + tx);

        // Request transaction information
        $.getJSON(FW.EXPLORER_API + '/api/tx/' + tx, function( o ){
            if(!o.error){
                var fmt = (o.divisible) ? '0,0.00000000' : '0,0';
                $('#source').html(o.source);
                $('#issuer').html(o.issuer);
                $('#destination').html(o.destination);
                $('#asset').html('<img src="' + FW.EXPLORER_API + '/icon/' + o.asset + '.png" class="asset-icon-sm pull-left">' + o.asset);
                if(o.asset_longname)
                    $('#asset-longname').html('<img src="'+ FW.EXPLORER_API + '/icon/' + o.asset + '.png" class="asset-icon-sm pull-left">' + o.asset_longname + '</a>');
                $('#tx-hash').html(o.tx_hash);
                var fmt = (String(o.quantity).indexOf('.')==-1) ? '0,0' : '0,0.00000000';
                $('#quantity').text(numeral(o.quantity).format(fmt));
                $('#description').text(o.description);
                $('#status').text(o.status);
                $('#divisible').text(o.divisible);
                $('#locked').text(o.locked);
                $('#fee').text(o.fee + ' XCP');
                $('#transfer').text(o.transfer);
                $('#timestamp').html('<span data-livestamp='  + o.timestamp + ' class="nowrap"></span>');
                if(o.tx_index){
                    $('#block').html(numeral(o.block_index).format('0,0'));
                    $('#tx-index').text(numeral(o.tx_index).format('0,0'));
                } else {
                    $('#block').text('-');
                    $('#tx-index').text('-');
                }
            }
        });   

    });

</script>
